#ui-view{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom:0;
}

/*
 * 路由动画
 */
.page-from-center-to-left {
  animation: pageFromCenterToLeft 400ms forwards;
}
.page-from-left-to-center {
  animation: pageFromLeftToCenter 400ms forwards;
}
@keyframes pageFromCenterToLeft {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0.5;
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes pageFromLeftToCenter {
  from {
    opacity: .5;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.page-from-right-to-center {
  animation: pageFromRightToCenter 400ms forwards;
  z-index: 2002;
}
.page-from-center-to-right {
  animation: pageFromCenterToRight 400ms forwards;
  z-index: 2002;
}
@keyframes pageFromRightToCenter {
  from {
    transform: translate3d(100%, 0, 0);
    opacity: .9;
  }
  to {
    transform: translate3d(0,0, 0);
    opacity: 1;
  }
}
@keyframes pageFromCenterToRight {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(100%, 0, 0);
    opacity: .9;
  }
}
